<template>
  <span class="fold-wrapper" @click="toggleFold">
    <icon-menu-fold />
  </span>
</template>

<script setup>
// Promise.resolve()
//   .then(() => {
//     console.log(0)
//     return Promise.resolve(4)
//   })
//   .then(e => {
//     console.log(e)
//   })

// Promise.resolve()
//   .then(() => {
//     console.log(1)

//   })
//   .then(() => {
//     console.log(2)
//   })
//    .then(() => {
//     console.log(3)
//   })
//    .then(() => {
//     console.log(5)
//   })
//    .then(() => {
//     console.log(6)
//   })


// import { defineComponent } from 'vue'
// import { useLayoutStore } from '../index'

// export default defineComponent({
//   name: 'Humburger',
//   components: { MenuFoldOutlined },
//   setup() {
//     const store = useLayoutStore()
//     function toggleFold() {
//       store?.toggleCollapse(!store.state.isCollapse)
//     }
//     return {
//       state: store?.state,
//       toggleFold,
//     }
//   },
// })
</script>

<style lang="less" scoped>
.fold-open-status {
  transform: rotate(180deg);
}
.fold-close-status {
  transform: rotate(0);
}
.fold-wrapper {
  box-sizing: border-box;
  display: inline-flex;
  line-height: @logoHeight;
  text-align: center;
  padding: 0 10px;
  font-size: 18px;
  transition: transform @transitionTime;
}
.fold-wrapper:hover {
  color: #999999;
  cursor: pointer;
}
</style>
